<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-键位事件 </title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 键盘事件：@keydown、@keypress 按键触发时、@keyup -->
    用户名：<input type="text" @keydown="show($event, '按下键盘')">

    <hr>
    <h2>简化按键的判断</h2>
    用户名：<input type="text" @keydown.13="print">
    用户名：<input type="text" @keydown.enter="print">
    <hr>
    <!-- 事件修饰符 -->
    <h1>只触发一次</h1>
    <button @click.once="print">只触发一次</button>

    <hr>
    <h1>自定义键位</h1>
    <p>按下v键时触发事件</p>
    用户名：<input type="text" @keydown.v="print">
</div>
<script>
    /**v
     * 自定义键位别名
     */
    Vue.config.keyCodes = {
        v: 86,
        f1: 112,
        // camelCase 不可用
        mediaPlayPause: 179,
        // 取而代之的是 kebab-case 且用双引号括起来
        "media-play-pause": 179,
        up: [38, 87]
    };

    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: 'hello world'
            }
        },
        methods: {
            show(e, w) {
                console.log(e.keyCode, w);
            },
            print() {
                console.log(1111)
            }
        }
    });

</script>
</body>
</html>